import { Button, Input, Radio, Space } from "antd";
import React, { useState } from "react";
import styles from "./Bilibili.module.css";
import { SearchOutlined } from "@ant-design/icons";
import { biliApi } from "../../../../utils/backend/server";
import { Option } from "antd/es/mentions";
import { toast } from "../../../../components/Toast/Toast";
import { UPLOAD_RESOURCE } from "../../../../utils/utils/request";

export type MediaType = "video" | "audio";
const options = [
  { label: "audio", value: "audio" },
  { label: "video", value: "video" },
];

export const Bilibili = () => {
  const [info, setInfo] = useState<{ url: string; type: MediaType }>({
    url: "",
    type: "audio",
  });

  const [media, setMedia] = useState<{ type: MediaType; src: string }>({
    type: "audio",
    src: "",
  });

  const submit = () => {
    if (info.url === "") {
      toast("please check your url!");
      return;
    }
    biliApi.downloadBili(info.url, info.type).then(({ data: { name } }) => {
      setMedia({
        type: info.type,
        src: UPLOAD_RESOURCE + name,
      });
    });
  };

  return (
    <div className={styles.container}>
      <div className={styles.inputBox}>
        <Input
          placeholder="please enter bilibili video address!"
          onChange={(val) => setInfo((e) => ({ ...e, url: val.target.value }))}
        />

        <Radio.Group
          options={options}
          onChange={(val) => setInfo((e) => ({ ...e, type: val.target.value }))}
          value={info.type}
          optionType="button"
        />
      </div>
      <br />

      {media.type === "video" ? (
        <video src={media.src} controls></video>
      ) : (
        <audio src={media.src} controls></audio>
      )}

      <Button type="primary" icon={<SearchOutlined />} onClick={submit}>
        Search
      </Button>
    </div>
  );
};
